<template>
	<view class="continer">
		<navBar name="告警详情"></navBar>
		<v-tabs class="mb-32" v-model="tabValue" :tabs="tabs" activeColor="#222" color="#888" bg-color="transparent"
			padding-item="0 20rpx 30rpx 20rpx" :line-scale="0.3" :scroll="false" field="name"></v-tabs>
		<scroll-view scroll-y="true" class="scroll-Y" :scroll-top="scrollTop" scroll-with-animation>
			<view class="bg-fff radius-16 padding-30 mb-24 pb-10">
				<view class="font-weight-600 mb-24">
					车辆信息
				</view>
				<nut-cell title="车牌号" :desc="detail.truckLicenseNo"></nut-cell>
				<nut-cell title="告警地址" :desc="detail.addressDetail"></nut-cell>
				<nut-cell title="告警类型" :desc="currWarningInfo.warningTypeName"></nut-cell>
				<nut-cell title="告警时间" :desc="currWarningInfo.createDate"></nut-cell>
			</view>
			<view ref="scroll1" class="bg-fff radius-16 padding-30 mb-24 pb-10">
				<view class="font-weight-600 mb-24">
					位置信息
				</view>
				<nut-cell title="位置" :desc="detail.addressDetail"></nut-cell>
				<nut-cell title="速度" desc="没有字段"></nut-cell>
				<nut-cell title="经度" :desc="detail.longitude+''"></nut-cell>
				<nut-cell title="纬度" :desc="detail.latitude+''"></nut-cell>
				<nut-cell title="定位时间" desc="没有字段"></nut-cell>
			</view>
			<view ref="scroll2" class="bg-fff radius-16 padding-30 mb-24 pb-10">
				<view class="font-weight-600 mb-24">
					异常信息
				</view>
				<nut-cell title="异常类型" :desc="currWarningInfo.warningTypeName"></nut-cell>
				<nut-cell title="位置" :desc="detail.addressDetail"></nut-cell>
				<nut-cell title="时间" :desc="currWarningInfo.warningStartTime"></nut-cell>
				<nut-cell title="时长" desc="没有字段"></nut-cell>
			</view>
			<view ref="scroll3" class="bg-fff radius-16 padding-30 mb-24 pb-10">
				<view class="font-weight-600 mb-24">
					处理记录
				</view>
				<text v-if="recordList.length==0">暂无</text>
				<nut-steps v-else direction="vertical" progress-dot current="3">
					<nut-step v-for="item in recordList" :key="item.warningProcessRecordId"
						:title="new Date(item.approveDate).toLocaleString()">
						<template #content>
							<view class="mb-32">
								{{item.approveComments}}
							</view>
							<!-- <image style="height:100rpx; border-radius: 16rpx;" mode="heightFix" :src="src"></image> -->
						</template>
					</nut-step>
				</nut-steps>
			</view>
			<view class="height-10"></view>
		</scroll-view>
		<nut-button @tap="showPop = true" block type="primary">发起处理</nut-button>
	</view>
	<nut-popup closeable round position="bottom" :custom-style="{ height: '1000rpx',padding:'32rpx'}"
		v-model:visible="showPop">
		<view class="text-center font-32 font-weight-600">
			提交处理
		</view>
		<!-- <view class="mtb-32">
			上传照片（0/8）
		</view> -->
		<!-- <nut-uploader :url="uploadUrl"></nut-uploader> -->
		<view class="mtb-32">
			处置意见
		</view>
		<nut-textarea v-model="formData.approveInfo" textarea-class="bg-f9" />
		<view class="text-center mt-32 bot-btn flex flex-j-ar">
			<picker @change="bindPickerChange($event,'APPROVE')" :value="pickerIndex" :range="agentStaffList"
				range-key="agentStaffName">
				<nut-button style="width: 150rpx;" type="primary">提交</nut-button>
			</picker>
			<picker @change="bindPickerChange($event,'TRANSFER')" :value="pickerIndex" :range="agentStaffList"
				range-key="agentStaffName">
				<nut-button style="width: 150rpx;" type="info">转派</nut-button>
			</picker>
			<nut-button style="width: 150rpx;" @tap="submit('COMPLETE')" type="success">完结</nut-button>
			<nut-button style="width: 150rpx;" @tap="submit('REJECT')" type="danger">驳回</nut-button>
		</view>
	</nut-popup>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getVehicleWarnDetail,
		doApprove
	} from '@/api/vehicleWarning.js'
	import {
		storeToRefs
	} from 'pinia'
	import useUserState from '@/stores/user.js'
	import useSelectOptions from '@/stores/useSelectOptions.js'

	const store = useUserState()
	const store2 = useSelectOptions()

	const {
		userData,
	} = storeToRefs(store)
	const {
		agentStaffList
	} = storeToRefs(store2)
	store2.getAgentUserList()

	const pickerIndex = ref(0)

	const id = ref(null)
	const currWarningInfo = ref({})

	const formData = reactive({
		approveInfo: "", //意见
		dispatchUserId: "", //转接人
		approveUserId: userData.value.userId, //处理人（当前用户）
	})

	onLoad(({
		warningInfoId
	}) => {
		id.value = warningInfoId
		currWarningInfo.value = uni.getStorageSync('_currWarningInfo') || {}
		getDetail(warningInfoId)
	})

	const detail = ref({})
	const recordList = ref([])

	const getDetail = async (warningInfoId) => {
		const {
			obj
		} = await getVehicleWarnDetail(warningInfoId)
		const {
			warningDetail,
			warningProcessRecordList
		} = JSON.parse(obj).obj
		detail.value = warningDetail || {}
		recordList.value = warningProcessRecordList || []
		console.log("==recordList", JSON.parse(obj).obj)
	}

	const scrollTop = ref(0)
	const scroll1 = ref()
	const scroll2 = ref()
	const scroll3 = ref()
	const scrolls = reactive({
		scroll1,
		scroll2,
		scroll3
	})
	const showPop = ref(false)
	const tabs = ref([{
			id: 1,
			name: '车辆信息'
		},
		{
			id: 2,
			name: '位置信息'
		},
		{
			id: 3,
			name: '异常信息'
		},
		{
			id: 4,
			name: '处理记录'
		}
	])
	const tabValue = ref(0)

	watch(tabValue, (val) => {
		console.log(9, val)
		if (val == 0) {
			scrollTop.value = 0
		} else {
			scrollTop.value = scrolls[`scroll${val}`].$el.offsetTop
		}
	})

	const bindPickerChange = (e, sts) => {
		formData.dispatchUserId = agentStaffList.value[e.detail.value].userId
		submit(sts)
	}


	const stsOptions = {
		APPROVE: '提交',
		TRANSFER: '转派',
		COMPLETE: '完结',
		REJECT: '驳回',
	}

	const submit = async (sts) => {
		const {
			confirm,
			cancel
		} = await uni.showModal({
			title: '提示',
			content: '确定要' + stsOptions[sts] + '吗？',
		});

		if (cancel) {
			return
		}

		const {
			obj
		} = await doApprove({
			sts, //状态：TRANSFER转派，APPROVE提交，COMPLETE完成，REJECT驳回
			warningInfoId: id.value,
			...formData
		})
		const {
			returnCode
		} = JSON.parse(obj)
		if (returnCode == 'Y') {
			uni.showToast({
				title: '审批成功',
				icon: 'success'
			})
		}
	}
</script>

<style scoped lang="scss">
	.continer {
		height: 100vh;
		overflow: hidden;
		--nut-cell-color: #666;
		--nut-cell-desc-color: #333;

		.scroll-Y {
			height: calc(100vh - 350rpx);
			margin-top: 16rpx;
		}

		:deep(.nut-cell) {
			padding: 0;
			box-shadow: none;
			margin-top: 24rpx;
			margin-bottom: 0;
		}

	}

	:deep(.nut-popup) {
		z-index: 5 !important;
	}

	:deep(.nut-overlay) {
		z-index: 4 !important;
	}

	:deep(.uni-picker-header) {
		&::before {
			content: '选择指派人';
			position: absolute;
			height: inherit;
			display: flex;
			align-items: center;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			color: #666;
		}
	}

	.bot-btn {
		position: fixed;
		width: 686rpx;
		bottom: 32rpx;
	}
</style>
<style>
	.nut-textarea {
		background-color: #f9f9f9 !important;
		padding: 20rpx 24rpx !important;
	}

	.nut-step-title {
		margin-bottom: 16rpx !important;
	}
</style>